<template>
  <div v-if="movedetail" class="box">
    <van-sticky>
      <div class="navbar">
        <van-icon class="navcross" name="arrow-left" @click="$router.back()" />
        <span class="nav-title">{{ movedetail.name }}</span>
      </div>
    </van-sticky>

    <div class="image">
      <img :src="movedetail.poster" alt="">
    </div>

    <div class="film-detail">
      <div class="col">
        <div class="filmname">
          <span class="titlename">{{ movedetail.name }}</span>
          <span class="titleitem">{{ movedetail.item.name }}</span>
        </div>
        <div class="filmgrade" v-if="movedetail.grade">
          <span class="grade">{{ movedetail.grade }}</span>
          <span class="gradetext">分</span>
        </div>
      </div>
      <div class="film-category">{{ movedetail.category }}</div>
      <div class="film-premiere-time">{{ movedetail.premiereAt | dateFilter }} 上映</div>
      <div class="film-address">{{ movedetail.nation }}</div>
      <div class="film-texth" ref="filmtext">{{ movedetail.synopsis }}</div>
      <div class="toggle" @click="arrowClick">
        <img ref="arrowupper" src="../assets/arrow.png" alt="">
      </div>
    </div>

    <Actors :movedetail="movedetail" />

    <Photos :movedetail="movedetail" />

    <div class="select-ticket" @click="$router.push('/cinema')">选座购票</div>

  </div>
</template>

<script>
import moment from 'moment'
import http from '../request/http'
import Actors from './detail/Actors.vue'
import Photos from './detail/Photos.vue'
export default {
  name: 'Detail',
  data() {
    return {
      // 电影详情信息
      movedetail: null,
      // 控制电影介绍信息部分显隐
      textisshow: false,
    }
  },
  components: {
    Actors,
    Photos
  },
  methods: {
    arrowClick() {
      if (this.textisshow) {
        // 隐藏部分内容
        this.$refs.filmtext.className = 'film-texth'
        this.$refs.arrowupper.className = ''
        this.textisshow = false
      } else {
        // 展示全部内容
        this.$refs.filmtext.className = 'film-text'
        this.$refs.arrowupper.className = 'arrowupper'
        this.textisshow = true
      }
    }
  },
  filters: {
    dateFilter(date) {
      return moment(date * 1000).format('YYYY-MM-DD')
    }
  },
  mounted() {
    http({
      url: `gateway?filmId=${this.$route.params.myid}&k=3869895`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      if (res.status == 0) {
        let { film } = res.data
        this.movedetail = film
      }
    })
  }
}
</script>

<style scoped>
.box {
  background: #f4f4f4;
  padding-bottom: .59rem;
}
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  height: .45rem;
  line-height: .45rem;
}
.navcross {
  position: absolute;
  padding-left: .2rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ff5f16;
  font-size: .2rem;
}
.nav-title {
  display: block;
  font-size: .18rem;
  text-align: center;
}







.image {
  width: 100%;
  height: 56vw;
  position: relative;
  overflow: hidden;
}
.image img {
  width: 100%;
  position: absolute;
  top: 50%;
  display: block;
  transform: translateY(-50%);
}







.film-detail {
  padding: 15px;
  padding-top: 12px;
  background-color: #fff;
}
.col {
  display: flex;
  justify-content: space-between;
}
.filmname {
  width: 2.56rem;
}
.filmname span {
  vertical-align: middle;
}
.titlename {
  color: #191a1b;
  font-size: .18rem;
  height: .24rem;
  line-height: .24rem;
  margin-right: 7px;
}
.titleitem {
  font-size: .09rem;
  color: #fff;
  background-color: #d2d6dc;
  height: .14rem;
  line-height: .14rem;
  padding: 0 2px;
  border-radius: 2px;
  display: inline-block;
}
.filmgrade {
  width: calc(100% - 250px);
  text-align: right;
  color: #ffb232;
}
.grade {
  font-size: .18rem;
  font-style: italic;
}
.gradetext {
  font-size: .1rem;
}
.film-category {
  font-size: .13rem;
  color: #797d82;
  margin-top: 8px;
}
.film-premiere-time {
  font-size: .13rem;
  color: #797d82;
  margin-top: 8px;
}
.film-address {
  font-size: .13rem;
  color: #797d82;
  margin-top: 8px;
}
.film-texth {
  height: 38px!important;
  overflow: hidden;
  margin-top: 12px;
  font-size: .13rem;
  color: #797d82;
  line-height: .19rem;
  transition: height .5s ease;
}
.film-text {
  margin-top: 12px;
  font-size: .13rem;
  color: #797d82;
  line-height: .19rem;
}
.toggle {
  text-align: center;
  display: block;
  height: auto;
  width: .20rem;
  margin: auto;
  line-height: normal;
}
.toggle img {
  width: .08rem;
  margin: auto;
}
.arrowupper {
  transform: rotate(180deg);
}





.select-ticket {
  position: fixed;
  bottom: 0;
  left: 0;
  height: .49rem;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: .16rem;
  line-height: .49rem;
}
</style>